<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>


<div id="show"></div>
<hr style="width:100%; clear:left;"/>
<h1>get&post</h1>
<input name="name" value="b&c=d"/><button>发送get</button><button>发送post</button>
<script>
    var show = document.getElementById("show");
    var input = document.querySelector("input");
    var buttons = document.querySelectorAll("button");

    //发送get请求
    buttons[0].onclick = () =>{
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () =>{
            if(xhr.readyState==4){
                if(xhr.status==200){
                    show.innerHTML += xhr.responseText;
                }else{
                    throw new Error(xhr.status + ":" + xhr.statusText)
                }
            }
        }

        xhr.open("GET","inc.jsp?name="+encodeURIComponent(input.value),true);
        xhr.send();
    }

    //发送post请求
    buttons[1].onclick = () =>{
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () =>{
            if(xhr.readyState==4){
                if(xhr.status==200){
                    show.innerHTML += xhr.responseText;
                }else{
                    throw new Error(xhr.status + ":" + xhr.statusText);
                }
            }
        }

        xhr.open("POST","inc.jsp",true);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send("name="+encodeURIComponent(input.value));
    }

</script>

</body>
</html>